Menus Guidelines 選單指導規則
Usage 用法
選單是臨時彈出的選項列表，通常由頂部更多按鈕觸發。它比單選按鈕更省空間且整潔，可透過點選圖示、按鈕或輸入框等方式開啟。
選單顯示在所有其他永久性 UI 元素的前面。
選單相對於螢幕或瀏覽器的邊緣定位。它們通常出現在生成它們的元素的下方、旁邊（或前面）。如果它們的位置可能被瀏覽器或螢幕邊緣截斷，選單可以改為出現在生成它的元素的左側、右側或上方。
選單的高度應至少比應用的 UI 少一行。
Anatomy 結構
Container & list items 容器與列表項
選單容器是一個裝載所有選項的區域。每個選項可以包含文字說明、前面和後面的小圖示，以及快捷鍵。使用者可以與這些選項互動：把滑鼠放上去、選中它，或點選它。如果某個選項暫時不能使用，我們會把它顯示成灰色（禁用狀態），而不是直接把它刪掉。
Divider 分隔線
分隔線可用於將列表項分組。
Responsive layout 響應式佈局
Compact window size 緊湊的視窗尺寸
底部表單是緊湊視窗尺寸（如移動裝置）中選單的替代方案。它們有更多空間來顯示額外的專案和更長的標籤。
Medium & expanded window sizes 中等和展開視窗尺寸
在較大螢幕上，底部操作欄可轉變為選單，以保持主內容的意圖和上下文。
Behavior 行為
Appearing 出現
當使用者點選互動元素（如圖示、按鈕或操作）或內容（如選中的專案或文字）時，會出現一個選單。
選單在螢幕上的位置會影響其出現的位置和方式。如果在螢幕頂部開啟，它會向下展開（以避免被裁剪）。選單採用淡入淡出的過渡模式進入和離開螢幕。這種動畫在選單與觸發選單的互動元素之間建立了一種聯絡。
預設情況下，選單會帶有進入動畫效果。但在桌面端，選單可以跳過動畫，直接立即開啟。
當選單展開時，會發生以下過渡效果：
- 選單緩慢顯示，並輕輕往下移動一點
- 分隔線變得更粗，顏色由灰變藍
- 文字變小並往上移
- 下箭頭消失，上箭頭出現
當選單列表中的某一項被選中時，會發生以下過渡效果：
- 觸控時出現漣漪效果
- 選中的文字淡入輸入框
- 選單列表淡出
- 向上箭頭淡出，向下箭頭淡入
Filtering 過濾
帶有過濾功能的選單也被稱為自動完成或組合框。當使用者開始輸入時，選單選項會根據輸入內容進行過濾。這可以幫助使用者從大量列表中快速找到正確的選項。
帶有過濾功能的選單在選單高度變化時，對建議的移動應用了動態緩動效果。
Scrolling 滾動
如果無法一次性顯示所有選單項，選單可以設定為可滾動。在此狀態下，選單會顯示一個常駐的捲軸。
Selection 選擇
當選單從按鈕或圖示按鈕開啟時，按鈕或圖示按鈕應保持視覺上的不變。
Interaction & style 互動與樣式
初始焦點狀態行為應與平臺慣例一致：
- Android：未明確設定焦點
- iOS 和網頁：第一個選單項或選單標題
對於退出焦點，考慮使用者期望在退出選單時使用的平臺慣例，例如：
- 選擇一個選項
- 點選對話方塊外部
- 使用系統返回按鈕
關閉選單後焦點的位置取決於應用程式。
Interactability 可互動性
禁用的選單項可以獲得焦點，但不可選擇。分隔符無法獲得焦點。
